import { Alert, Button, Result } from "antd"
import React, { useCallback } from "react"
import { ErrorResponse, isRouteErrorResponse, useNavigate, useRouteError } from "react-router"
const { ErrorBoundary } = Alert
export default () => {
  const RouteError = useRouteError() as ErrorResponse
  const isRouteError = isRouteErrorResponse(RouteError)
  const navigate = useNavigate()
  const backHome = useCallback(() => {
    navigate("/", { replace: !0 })
  }, [])

  return (
    <Result
      status={isRouteError ? (RouteError.status as any) : 500}
      title={isRouteError ? RouteError.statusText : "脚本错误"}
      subTitle={isRouteError ? RouteError.data : ""}
      extra={
        <Button type="primary" onClick={backHome}>
          返回首页
        </Button>
      }
    >
      <ErrorBoundary>
        <THRowError error={isRouteError ? RouteError["error"] : RouteError} />
      </ErrorBoundary>
    </Result>
  )
}
const THRowError = (props: { error?: Error }) => {
  if (props.error) throw props.error
  return <></>
}
